<!DOCTYPE html>
<html lang="en">
    <head>
        <title></title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="../js/vue.js"></script>
        <script src="../js/vue-router.js"></script>
    </head>
    <body>
        <div id="app" style="border:10px solid pink">
            <router-view></router-view>
            <router-link to="/index">找野猪</router-link>
            <router-link to="/admin/1">找乔治</router-link>
            <router-link to="/admin/2">找苏西</router-link>
            <router-link to="/admin/3">找丹尼</router-link>
            <router-link to="/admin/4">找佩德罗</router-link>
            <router-link to="/admin/5">找理查德</router-link>
            <router-link to="/admin/6">找苏怡</router-link>
        </div>
        <template id="girl">
            <div>
                <h2>这是佩奇</h2>
            </div>
        </template>
        <template id="boy">
            <div style="border:10px solid green">
                <h2>{{animalname}}</h2>
                <router-view></router-view>
                <button @click='jump'>点击你将变成一只傻狗</button>
            </div>
        </template>
        <script>
            // 这里是组件
            var Girl =Vue.component('girl',{
                template : '#girl',
            });
            var Boy = Vue.component('boy',{
                template : '#boy',
                data(){
                    return {
                        animalname : '???',
                    }
                },
                watch : {
                    $route(to){
                        var id =to.params.id;
                        if(id == 1){
                            this.animalname = '我是恐龙乔治'
                        }else if(id == 2){
                            this.animalname = '我是小羊苏西'
                        }else if(id == 3){
                            this.animalname = '我是小狗丹尼'
                        }else if(id == 4){
                            this.animalname = '我是小马佩德罗'
                        }else if(id == 5){
                            this.animalname = '我是小兔理查德'
                        }else if(id == 6){
                            this.animalname = '我是斑马苏怡'
                        }
                    }
                },
                mounted(){
                    var id = this.$route.params.id;
                    if(id == 1){
                            this.animalname = '我是恐龙乔治'
                        }else if(id == 2){
                            this.animalname = '我是小羊苏西'
                        }else if(id == 3){
                            this.animalname = '我是小狗丹尼'
                        }else if(id == 4){
                            this.animalname = '我是小马佩德罗'
                        }else if(id == 5){
                            this.animalname = '我是小兔理查德'
                        }else if(id == 6){
                            this.animalname = '我是斑马苏怡'
                        }
                },
                methods : {
                    jump(){
                        console.log(this.$route.params.id)
                        var id = this.$route.params.id;
                        if(id == 1){
                            this.$router.push({name : 'qiao'})
                        }else if(id == 2){
                            this.$router.push({name : 'su'})
                        }else if(id == 3){
                            this.$router.push({name : 'dan'})
                        }else if(id == 4){
                            this.$router.push({name : 'pei'})
                        }else if(id == 5){
                            this.$router.push({name : 'li'})
                        }else if(id == 6){
                            this.$router.push({name : 'yi'})
                        }
                    }
                }
            })
            var Qiao = {
                template : '<div style="border:10px solid red">恐龙恐龙</div>'
            }
            var Su = {
                template : '<div style="border:10px solid red">咩 ~ 咩 ~ </div>'
            }
            var Dan = {
                template : '<div style="border:10px solid red">汪汪汪</div>'
            }
            var Pei = {
                template : '<div style="border:10px solid red">驾驭~驾驭</div>'
            }
            var Li = {
                template : '<div style="border:10px solid red">额。。。额。。。</div>'
            }
            var Yi = {
                template : '<div style="border:10px solid red">咦...咦...</div>'
            }
            // 这里是路由
            var router = new VueRouter({
                routes : [
                    {
                        name : 'lalala',
                        path : '/index',
                        component : Girl,
                    },
                    {
                        name : 'hehehe',
                        path : '/admin/:id',
                        component : Boy,
                        // 定义嵌套路由
                        children : [
                            {
                                name : 'qiao',
                                path : '/qiao',
                                component : Qiao
                            },
                            {
                                name : 'su',
                                path : 'su',
                                component : Su
                            },
                            {
                                name : 'dan',
                                path : 'dan',
                                component : Dan
                            },
                            {
                                name : 'pei',
                                path : 'pei',
                                component : Pei
                            },
                            {
                                name : 'li',
                                path : 'li',
                                component : Li
                            },
                            {
                                name : 'yi',
                                path : 'yi',
                                component : Yi
                            },
                        ]
                    }
                ]
            })
            var vm = new Vue({
                el: '#app',
                router,
                data: {

                }
            })
        </script>
    </body>
</html>